const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/dist/plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const {
    resolve
} = require('./utils')


/**@type {import('webpack').Configuration} */
module.exports = {
    entry: [resolve('src/main.js')],
    output: {
        filename: 'js/[name].bundle.js',
        path: path.resolve(__dirname, '../dist'),
    },
    externals: {
        'vue': 'Vue'
    },
    module: {
        rules: [{
                test: /\.vue$/,
                use: ['vue-loader']
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            {
                test: /\.(png|jpe?g|gif)$/i,
                loader: 'file-loader',
                options: {
                    name: 'img/[name].[ext]',
                }
            },
            {
                test: /\.(woff|ttf)$/i,
                loader: 'file-loader',
                options: {
                    name: 'img/fonts/[name].[ext]',
                }
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        }),
        new HtmlWebpackPlugin({
            template: resolve('public/index.html'),
            filename: resolve('dist/index.html')
        }),
        new VueLoaderPlugin.default(),

    ]
}